// 首先引入对应的方法来创建虚拟DOM
// import { createElement } from 'react';
import diff from './diff';
import { createElement, renderDom, render } from './element';
// 跳过JSX -> 编译过程
{/* <ul className="list">
  <li className="item">周杰伦</li>
  <li className="item">林俊杰</li>
  <li className="item">王力宏</li>
</ul> */}

let virtualDom = createElement('ul', {class: 'list'}, [
  createElement('li', {class: 'item'}, ['鹿晗']), 
  createElement('li', {class: 'item'}, ['林俊杰']),
  createElement('li', {class: 'item'}, ['王力宏'])
]);

let virtualDom2 = createElement('ul', {class: 'list-group'}, [
  createElement('li', {class: 'item'}, ['鹿哈']),
  createElement('li', {class: 'item'}, ['林俊绝']),
  createElement('li', {class: 'item', value: 'lh'}, ['王力宏']),
  createElement('li', {class: 'item'}, ['黄子诚'])
])
// 比较两颗虚拟DOM树，找出差异 (diff算法)，交给浏览器
console.log(virtualDom);

let el = render(virtualDom); // 渲染 内存中 document.createElement(tag)
// Element树 -> Tag树
renderDom(el, document.getElementById('root'))

// 新的DOM页面
let patches = diff(virtualDom, virtualDom2);

const App = () => {
  return (
    <div></div>
  )
}

export default  App